import React, { useEffect, useState } from "react"
import styles from "./defence.less"
import useStore from "@/context/useStore"
import classNames from 'classnames';
import { observer } from "mobx-react-lite"
import { Table, Input, Button } from "antd"
import { SearchOutlined,FileDoneOutlined,FormOutlined} from '@ant-design/icons'
import { Link } from "umi"
import { DefenceList ,DefeneState} from "@/utils/defence"
import {getDefenceList} from '@/services/index'

const status = ['全部', '未开始', '进行中', '已结束', '已驳回']
const columns = [
    {
        title: '名称',
        dataIndex: 'degenceName',
        align:'center'
    },
    {
        title: '专业',
        dataIndex: 'majorName',
        align:'center'
    },
    {
        title: '班级/计划',
        render:(row:DefenceList)=> <div>
            <div className={styles.classNameColor}>{row.className}</div>
            <div>{row.planName}</div>
        </div>,
        align:'center'
    },
    {
        title: '发起人',
        dataIndex: 'defenceAuthorName',
        align:'center'
    },
    {
        title: '开始/截止时间',
        render:(row:DefenceList)=> <div>
            <div>开始:{row.defenceCreateTime}</div>
            <div>截止:{row.defenceEndTime}</div>
        </div>,
        align:'center'
    },
    {
        title: '状态',
        render:(row:DefenceList)=><span className={styles[`status${row.defenceStatus}`]} >{status[Number(row.defenceStatus)]}</span>,
        align:'center'
    },
    {
        title: '操作',
        render:(row:DefenceList)=> <div className={styles.twotop}>
            {
                row.defenceStatus ==2 ? <div className={styles.two}><FileDoneOutlined title='去答辩' /><FormOutlined title='查看评分'  /></div>:<FormOutlined title='查看评分'  />
            }
        </div>,
        align:'center'
    },
]

const Defence: React.FC = () => {

    let { Skill } = useStore()
    let [curSkill, setCurSkill] = useState('')
    let [curStatus, setCurStatus] = useState(0)
    let [isMyInfo, setMyInfo] = useState(false);
    let [searchTitle, setSearchTitle] = useState('');
    let [title, setTitle] = useState('');
    let [dataSource, setDataSource] = useState<DefenceList[]>([])
    let queryParams:DefeneState = {
        pageNum:1,
        pageSize:10,
        searchTitle:'',
        defenceMjorId:'',
        defenceStatus:'',
    }
    useEffect(() => {
        Skill.getSkillLabel()
    }, [])
    useEffect(() => {

        let newqueryParams: DefeneState = {} as DefeneState;
        if(curSkill){
            newqueryParams = {...queryParams,defenceMjorId:curSkill}
        }
        if(curStatus){
            newqueryParams = {...queryParams,defenceStatus:String(curStatus)}
        }
        if(searchTitle){
            newqueryParams = {...queryParams,pageSize:10,searchTitle}
        }else {
            newqueryParams = {...queryParams}
        }
        getDefenceList(newqueryParams).then(res=>{
            if (res.code == 200) {
                console.log(res.rows);
                
                setDataSource(res.rows)
            }
        })
    }, [curSkill,curStatus,searchTitle])
    return <div className={styles.postskill}>
        <div className={styles.box}>
            <section className={styles.post}>
                <section className={styles.major}>
                    <h2>专业：</h2>
                    <ul className={styles.statusList}>{
                        [{ id: '', name: '全部' }, ...Skill.skillLabel].map(item => {
                            return <span className={item.id === curSkill ? classNames(styles.span, styles.active) : styles.span} onClick={e => setCurSkill(item.id)} key={item.id}>{item.name}</span>
                        })
                    }</ul>
                </section>
                <section className={styles.state}>
                    <h2>状态：</h2>
                    <ul className={styles.statusListb}>
                        {
                            status.map((item, index) => {
                                return <span className={index === curStatus ? classNames(styles.span, styles.active) : styles.span} key={item} onClick={e => setCurStatus(index)}>{item}</span>
                            })
                        }
                    </ul>
                </section>
            </section>

            <div className={styles.table}>
                <div className={styles.search}>
                    <Link to="/teachers/addDefence">
                        <Button style={{ width: '115px', height: '32px' }} className={styles.button} type="primary" >+发起答辩</Button>
                    </Link>
                    <Input style={{ width: '210px', height: '35px' }} 
                        className={styles.input} placeholder="搜索名称/班级/计划" 
                        suffix={<SearchOutlined onClick={() => setSearchTitle(title)} />} 
                        value={title} 
                        onChange={e => setTitle(e.target.value)} onKeyDown={e => {
                        if (e.keyCode === 13) {
                            setSearchTitle(title)
                        }
                    }} />
                </div>
                <Table rowKey='defenceId' dataSource={dataSource} columns={columns as any} />
            </div>
        </div>

    </div>
}

export default observer(Defence)